<template>
	<div class="content-box">
		<TreeFilter
			title="科目列表"
			:data="treeDatas"
			id="id"
			label="subjectName"
			parentId="subjectParentId"
			parentName="subjectParentName"
			children="children"
			:default-value="initParam.id"
			@change="changeTreeFilter"
		>
			<template #toolButton>
				<div style="display: flex; justify-content: space-between; margin: 10px 0">
					<el-button type="primary" size="small" :icon="CirclePlus" @click="handleAddEditTree('新增科目')">新增</el-button>
					<el-button type="primary" size="small" :icon="EditPen" @click="handleAddEditTree('修改科目')">修改</el-button>
					<el-button type="danger" size="small" :icon="Delete" @click="handleDeleteTree">删除</el-button>
				</div>
			</template>
		</TreeFilter>
		<div class="table-box" style="flex: 1; width: 0px">
			<ProTable ref="libraryProTable" :columns="columns">
				<!-- 表格header按钮 -->
				<template #tableHeader="scope">
					<el-button type="primary" :icon="CirclePlus">新增题库</el-button>
				</template>
				<!-- 表格操作 -->
				<template #operation="scope">
					<el-button type="primary" link :icon="View">查看</el-button>
					<el-button type="primary" link :icon="EditPen">编辑</el-button>
					<el-button type="primary" link :icon="Delete">删除</el-button>
				</template>
			</ProTable>
		</div>
		<!-- 科目弹窗 -->
		<el-dialog v-model="subjectVisible" :title="subjectTitle" :destroy-on-close="true" width="30%" draggable>
			<el-form label-width="100px" ref="subjectFormRef" label-suffix=" :" :model="subjectFormModel">
				<el-form-item label="父级科目">{{ subjectFormModel.subjectParentName }}</el-form-item>
				<el-form-item
					label="科目名称"
					prop="subjectName"
					:rules="[
						{
							required: true,
							message: '请填写科目名称',
							trigger: 'blur'
						}
					]"
				>
					<el-input v-model="subjectFormModel.subjectName" placeholder="请输入科目名称" clearable maxlength="200"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="subjectVisible = false">{{ subjectTitle == "查看" ? "关闭" : "取消" }}</el-button>
					<el-button type="primary" @click="handleSubmit" v-if="subjectTitle != '查看'">确认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts" setup name="library">
import TreeFilter from "@/components/TreeFilter/index.vue";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from "@element-plus/icons-vue";
import { getAllSubjectsApi, addSubjectApi, deleteSubjectApi } from "@/api/modules/test/exam";
import { onMounted, reactive, ref } from "vue";
import { FormInstance, ElMessage } from "element-plus";
import { useHandleData } from "@/hooks/useHandleData";

// 表格配置项
const columns: ColumnProps[] = [
	{
		type: "index",
		label: "序号",
		width: 80
	},
	{
		prop: "a",
		label: "题库名"
	},
	{
		prop: "r",
		label: "类别"
	},
	{
		prop: "r",
		label: "科目名称"
	},
	{
		prop: "b",
		label: "题目数量"
	},
	{
		prop: "c",
		label: "更新时间"
	},
	{
		prop: "operation",
		label: "操作",
		width: 330
	}
];

const treeDatas = ref([]);

const initParam = reactive({ id: "" });
// 选中的树id
const selectTreeId = ref("");
// 选中的树name
const selectTreeName = ref("");
// 选中的树父级id
const selectParentTreeId = ref("");
// 选中的树父级name
const selectParentTreeName = ref("");

const subjectVisible = ref(false);
const subjectTitle = ref("");
const subjectFormRef = ref<FormInstance>();
const subjectFormModel = ref({
	subjectParentId: "",
	subjectParentName: "", // 父级树name
	id: "",
	subjectName: ""
});

// 获取所有科目
const getAllSubjects = async () => {
	const { result } = await getAllSubjectsApi();
	treeDatas.value = result as any;

	if (treeDatas.value.length) {
		initParam.id = (treeDatas.value[0] as any).id;
		// 弹窗赋值
		selectTreeId.value = (treeDatas.value[0] as any).id;
		selectTreeName.value = (treeDatas.value[0] as any).subjectName;

		subjectFormModel.value.subjectParentId = selectTreeId.value;
	}
};

const changeTreeFilter = (val: string, labelName: string, parentId: string, parentName: string) => {
	initParam.id = val;

	// 切换树
	selectTreeId.value = val;
	selectTreeName.value = labelName;
	selectParentTreeId.value = parentId;
	selectParentTreeName.value = parentName;

	subjectFormModel.value.subjectParentId = selectParentTreeId.value;
	subjectFormModel.value.subjectParentName = selectParentTreeName.value;
	subjectFormModel.value.subjectName = selectTreeName.value;
	subjectFormModel.value.id = selectTreeId.value;
};

// 树新增/编辑
const handleAddEditTree = (title: string) => {
	if (!selectTreeId) {
		ElMessage.error({ message: `请先选择节点！` });
		return;
	}
	subjectVisible.value = true;
	subjectTitle.value = title;
	if (title == "新增科目") {
		subjectFormModel.value.id = "";
		subjectFormModel.value.subjectName = "";
		subjectFormModel.value.subjectParentId = selectTreeId.value;
		subjectFormModel.value.subjectParentName = selectTreeName.value;
	} else {
		subjectFormModel.value.subjectParentId = selectParentTreeId.value;
		subjectFormModel.value.subjectParentName = selectParentTreeName.value;
	}
};

// 树删除
const handleDeleteTree = async () => {
	await useHandleData(deleteSubjectApi, { id: selectTreeId.value }, "删除科目");
	getAllSubjects();
};

// 树提交
const handleSubmit = () => {
	subjectFormRef.value!.validate(async valid => {
		if (!valid) return;
		try {
			await addSubjectApi({ ...subjectFormModel.value });
			subjectVisible.value = false;
			getAllSubjects();
		} catch (err) {
			console.log(err);
		}
	});
};

// 初始化请求
onMounted(async () => {
	await getAllSubjects();
});
</script>
<style lang="scss" scoped>
.content-box {
	display: flex;
	flex-direction: row;
	align-items: flex-start;

	.content-table {
		flex: 1;
		height: 100%;
	}
}
</style>